<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>小樊同学</title>
    <meta name="language" content="zh-CN">
    <meta name="title" content="小孙同学">
    <meta name="github" content="https://github.com/sun0225SUN/Awesome-Love-Code">
    <meta name="describe" content="收集不易，您的star是我坚持的动力，同时也欢迎各位PR哦! ">
    <link rel="icon" type="image/x-icon" href="https://cdn.jsdelivr.net/gh/sun0225SUN/photos/img/20210715233345.png">
    <link rel="stylesheet" href="css/love.css">
</head>

<body>

    <audio autoplay="autoplay" loop="loop" id="music" preload="auto">
        <source src="MP3/bgMusic.mp3" />
    </audio>

    
    <div class="container" onselectstart="return false;" unselectable="on" style="-moz-user-select:none;">

        <div class="body_left">
            <button class="modern-button">点击我</button>

            <img src="images/biubiubiu.gif" alt="" ondragstart='return false;'>
        </div>
 
        <div class="body_center love">
       
            <div class="block">
                <div class="div1"></div>
                <div class="div2"></div>
                <div class="div3"></div>
                <div class="div4"></div>
            </div>
        </div>
    </div>

    <div class="footer">
        <div class="border">
           
            <div class="border-top"></div>
            <div class="border-bottom"></div>
        </div>
    </div>

    <script type="text/javascript" src="js/love.js">
   


   
    </script>


<script type="text/javascript">


        document.addEventListener('click', function(event) {
    // 打印点击的元素
     setInterval("toggleSound()",1);
    
    // 你可以在这里处理点击事件，例如：
    // event.target.style.backgroundColor = 'yellow';
});
    function toggleSound() {
                var music = document.getElementById("music");//获取ID  
                if (music.paused) { //判读是否播放  
                    music.paused=false;
                    music.play(); //没有就播放 
                }    
        }

</script>

<style>
.modern-button {
    background-color: #00aaff; /* 天蓝色 */
    color: white;
    padding: 12px 36px;
    font-size: 16px;
    font-weight: 600;
    border: none;
    border-radius: 50px;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 8px 15px rgba(0, 0, 0, 0.1);
}

.modern-button:hover {
    background-color: #0099e6; /* 悬停时更深的蓝色 */
    box-shadow: 0 15px 20px rgba(0, 0, 0, 0.15);
    transform: translateY(-2px);
}

.modern-button:active {
    background-color: #007acc; /* 点击时的颜色 */
    box-shadow: 0 6px 10px rgba(0, 0, 0, 0.1);
    transform: translateY(1px);
}


    </style>
    
 

</body>

</html>
